<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="90px">
      <el-form-item label="客户姓名" prop="cusName">
        <el-input
            v-model="queryParams.cusName"
            placeholder="请输入客户姓名"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- 省市 -->
        <el-form-item label="省">
            <el-select v-model="queryParams.provinceCode" placeholder="请选择省份" clearable size="small" @change="getCustomCityListFn(2,queryParams.provinceCode)">
                <el-option v-for="item in provinceList" :key="item.id" :label="item.area_name" :value="item.id" />
            </el-select>
            <el-select v-model="queryParams.cityCode" placeholder="请选择市" clearable size="small">
                <el-option v-for="item in cityList" :key="item.id" :label="item.area_name" :value="item.id" />
            </el-select>
        </el-form-item>
      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          size="small"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="单号" align="center" prop="applyNo" />
        <el-table-column label="用户名" align="center" prop="trueName" />
        <el-table-column label="手机号" align="center" prop="phoneNo" />
        <el-table-column label="金额" align="center" prop="applyCount" />
        <el-table-column label="省市" align="center" prop="provinceName">
            <template slot-scope="scope">
                {{scope.row.provinceName}}-{{scope.row.cityName}}
            </template>
        </el-table-column>
        <el-table-column label="状态" align="center">
            <template slot-scope="scope">
                <span v-html="getType(scope.row.status)"></span>
            </template>
        </el-table-column>
        <el-table-column label="创建人" align="center" prop="createName" />
        <el-table-column label="创建时间" align="center" prop="createTime" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
            <el-button
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleView(scope.row,scope.index)"
                v-hasPermi="['business:quickList:query']"
            >详情</el-button>
            </template>
        </el-table-column>
    </el-table>
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getListFn"
    />
    
    <!-- 操作详细 -->
    <el-dialog title="快速申贷详情" :visible.sync="open" width="700px" class="infoDialog">
        <el-form ref="form" :model="form" label-width="160px" :inline="true">
            <el-row>
                <el-col :span="24" class="infoTitle"> 基本信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="订单单号:">{{ form.applyNo }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户姓名:">{{ form.trueName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="客户年龄:">{{ form.userAge }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系电话:">{{ form.phoneNo }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否结婚:">{{ form.isMarry == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最高学历:">{{ getEduType(form.education) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="工作类型:">{{ getOccupationType(form.occupation) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="否有商品房:">{{ form.isHouse == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="否有车辆:">{{ form.isCar == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="否有保单:">{{ form.isInsurance == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否有征信报告:">{{ form.isCredit == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="所在城市:">{{ form.provinceName }}-{{ form.cityName }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24" class="infoTitle"> 贷款信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="贷款金额:">{{ form.applyCount }}万元</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="期望放款时间:">{{ form.applyTime }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="用款期限:">{{ form.useTerm }}年</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="还款方式:">{{ getFinancingType(form.financingPreference) }}</el-form-item>
                </el-col>
            </el-row>
            <!-- 工薪族/自由职业 -->
            <el-row v-if="form.occupation === 1">
                <el-col :span="24" class="infoTitle"> 工薪信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="工资是否由银行代发:">{{ form.salaryPayType == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近半年平均打卡工资:">{{ getsalaryValueType(form.salaryPayValue) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="否缴纳社保:">{{ form.salarySocialSecurity == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="社保缴纳金额:">{{ getsalaryValueType(form.salarySocialSecurityValue) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否缴纳公积金:">{{ form.salaryHousingFund == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="公积金缴纳基数:">{{ getsalaryValueType(form.salaryHousingFundValue) }}</el-form-item>
                </el-col>
            </el-row>
            <!-- 企业主 -->
            <el-row v-else>
                <el-col :span="24" class="infoTitle"> 企业信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="企业成立时间:">{{ form.enterpriseEstablishedTime }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="企业是否有纳税:">{{ form.enterpriseTax == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近一年纳税额:">{{ getErpriseTaxType(form.enterpriseTaxValue) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否有开具增值税发票">{{ form.enterpriseBilling == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近1年开票额:">{{ getErpriseType(form.enterpriseBillingValue) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="是否有银行对公流水:">{{ form.enterpriseFlow == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近半年对公流水额:">{{ getFlowValueType(form.enterpriseFlowValue) }}</el-form-item>
                </el-col>
            </el-row>
	        
            <!-- 房产 -->
            <el-row v-if="form.isHouse === 1">
                <el-col :span="24" class="infoTitle"> 房产信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="房产市场价:">{{ form.houseValue }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="房屋状态:">{{ getHouseType(form.houseStatus) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="房产证持证状态:">{{ getHouseStatusType(form.houseCertificateStatus) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="房产类型:">{{ getHouseType2(form.houseType) }}</el-form-item>
                </el-col>
            </el-row>
            <!-- 车辆 -->
            <el-row v-if="form.isCar === 1">
                <el-col :span="24" class="infoTitle"> 车辆信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆市场价:">{{ form.carValue }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆状态:">{{ getCarType(form.carStatus) }}</el-form-item>
                </el-col>
            </el-row>
            <!-- 保单信息 -->
            <el-row v-if="form.isInsurance === 1">
                <el-col :span="24" class="infoTitle"> 保单信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="保单年缴费:">{{ form.insuranceYearValue }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="已缴费次数">{{ getinsuranceTimeType(form.insuranceTime) }}</el-form-item>
                </el-col>
            </el-row>
            <!-- 征信情况 -->
            <el-row v-if="form.isInsurance === 1">
                <el-col :span="24" class="infoTitle"> 征信信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="贷款账户状态:">{{ getCreditHaveType(form.creditHave) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="信用卡账户状态:">{{ getCreditCardHaveType(form.creditCardHave) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="最高逾期显示数字:">{{ getmaximumType(form.maximumShowOverdue) }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="征信当前是否有逾期:">{{ form.nowIsOverdue == 1 ? '是' : '否' }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="逾期金额:">{{ getoverdueValueType(form.overdueValue) }}元</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近六个月征信查询次数:">{{ getsixMonthType(form.sixMonthSearch) }}元</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="近两年征信查询次数:">{{ gettwoYearType(form.twoYearOverdue) }}元</el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24" class="infoTitle"> 其他信息 </el-col>
                <el-col :span="12">
                    <el-form-item label="过期时间:">{{ form.expirationTime }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建人:">{{ form.createName }}</el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="创建时间:">{{ form.createTime }}</el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="open = false">关 闭</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { axios_getList, axios_claim, axios_generate, axios_del, axios_proListInfo } from "@/api/system/quickList";
import { getCustomCityList } from "@/api/system/customer";

export default {
  name: "quickList",
  data() {
    return {
        productId: '',
        dialogSingle: false,
        proList: [],
        dialogTotal: 0,
        dialogLoading: false,
        dialogParams: {
            pageNum: 1,
            pageSize: 10
        },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 公司信息表格数据
      infoList: [],
      // 日期范围
      dateRange: [],
      search: '',
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        accumulateType: undefined,
        orderNum: undefined,
        areaCode: undefined,
        leader: undefined,
        phone: undefined,
        email: undefined,
        status: undefined,
      },
      // 表单参数
      form: {
        provinceObj: undefined,
        cityObj: undefined,
      },
        provinceList: [],
        cityList: [],
        checkedInfo: null,
    };
  },
  created() {
    this.getListFn();
    this.getCustomCityListFn(1, null);
  },
  methods: {
    // 匹配学历
    getEduType(type){
        switch(type){
            case 1:
                return '高中及以下'
            case 2:
                return '大专'
            case 3:
                return '本科'
            case 4:
                return '研究生'
            case 5:
                return '博士'
        }
    },
    // 匹配工作类型
    getOccupationType(type){
        switch(type){
            case 1:
                return '工薪族'
            case 2:
                return '企业主'
            case 3:
                return '自由职业'
        }
    },
    // 匹配工作类型
    getsalaryValueType(type){
        switch(type){
            case 1:
                return '3000以下'
            case 2:
                return '3000-5000元'
            case 3:
                return '5001-8000元'
            case 4:
                return '5001-8000元'
            case 5:
                return '8000元以上'
        }
    },
    getErpriseTaxType(type){
        switch(type){
            case 1:
                return '100万以内'
            case 2:
                return '100-199万'
            case 3:
                return '200-299万'
            case 4:
                return '300万以上'
        }
    },
    getErpriseType(type){
        switch(type){
            case 1:
                return '1万以内'
            case 2:
                return '10001-3万'
            case 3:
                return '30001-5万'
            case 4:
                return '50001-10万'
            case 5:
                return '11-30万'
            case 6:
                return '30万以上'
        }
    },
    // 匹配信用卡账户状态
    getCreditCardHaveType(type){
        switch(type){
            case 1:
                return '逾期'
            case 2:
                return '止付'
            case 3:
                return '呆账'
            case 4:
                return '转出'
            default:
                return '正常'
        }
    },
    // 匹配贷款账户状态
    getCreditHaveType(type){
        switch(type){
            case 1:
                return '逾期'
            case 2:
                return '呆账'
            case 3:
                return '转出'
            default:
                return '正常'
        }
    },
    // 匹配贷款账户状态
    getFlowValueType(type){
        switch(type){
            case 1:
                return '10万以内'
            case 2:
                return '10-50万'
            case 3:
                return '51-100万'
            case 4:
                return '101-300万'
            case 5:
                return '300万以上'
        }
    },
    getHouseType(type){
        switch(type){
            case 1:
                return '红本在手'
            case 2:
                return '住房按揭中'
            case 3:
                return '抵押中'
        }
    },
    getHouseType2(type){
        switch(type){
            case 1:
                return '商品房住宅'
            case 2:
                return '回迁房住宅'
            case 3:
                return '商铺'
            case 4:
                return '写字楼'
            case 5:
                return '公寓'
            case 6:
                return '其他'
        }
    },
    getCarType(type){
        switch(type){
            case 1:
                return '无贷款'
            case 2:
                return '按揭中'
            case 3:
                return '抵押中'
        }
    },
    getinsuranceTimeType(type){
        switch(type){
            case 1:
                return '1年1次'
            case 2:
                return '2年2次'
            case 3:
                return '2年3次'
            case 4:
                return '3年4次及以上'
        }
    },
    getmaximumType(type){
        switch(type){
            case 0:
                return 'N'
            case 1:
                return '1'
            case 2:
                return '2'
            case 3:
                return '3'
            case 4:
                return '4'
            case 5:
                return '5'
            case 6:
                return '6'
            case 7:
                return '7'
        }
    },
    getoverdueValueType(type){
        switch(type){
            case 1:
                return '500以下'
            case 2:
                return '500-1000'
            case 3:
                return '1000-1万'
            case 4:
                return '1万以上'
        }
    },
    getsixMonthType(type){
        switch(type){
            case 1:
                return '没有逾期'
            case 2:
                return '1-3次'
            case 3:
                return '4-6次'
            case 4:
                return '7-10次'
            case 5:
                return '11-15次'
            case 6:
                return '超过15次'
        }
    },
    gettwoYearType(type){
        switch(type){
            case 1:
                return '没有逾期'
            case 2:
                return '1-5次'
            case 3:
                return '6-10次'
            case 4:
                return '11-15次'
            case 5:
                return '超过15次'
        }
    },
    getHouseStatusType(type){
        switch(type){
            case 1:
                return '持证满3个月'
            case 2:
                return '持证未满3个月'
            case 3:
                return '未拿到房产证'
        }
    },
    // 匹配还款方式
    getFinancingType(type){
        switch(type){
            case 1:
                return '等额本金'
            case 2:
                return '等额本息'
            case 3:
                return '先息后本'
        }
    },

    // 获取当前用户的省市
    getCustomCityListFn(type,id){
        getCustomCityList({leveType: type,parentId: id}).then(res => {
            if(res.code === 'success'){
                if(type === 1){
                    this.provinceList = res.data;
                }else if(type === 2){
                    this.cityList = res.data;
                    this.queryParams.cityCode = '';
                }
            }
        });
    },
    
    //  类型
    getType(type){
        // 0:充值 1:订单消费 2:分享码 3:提现 4:人工充值
        switch(type){
            case 0:
                return '新增';
            break;
            case -1:
                return '作废';
            break;
            case 1:
                return '认领';
            break;
            case 2:
                return '生成订单';
            break;
        }
    },
    
    /** 查询公司信息列表 */
    getListFn() {
        this.loading = true;
        if(this.dateRange === null){
            this.dateRange = ['',''];
        }
        this.queryParams.begTime = this.dateRange[0];
        this.queryParams.endTime = this.dateRange[1];
        axios_getList(this.queryParams).then(response => {
            this.infoList = response.rows;
            this.total = response.total;
            this.loading = false;
        });
    },
    
    /** 详细按钮操作 */
    handleView(row) {
      this.open = true;
      this.form = row;
    },
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getListFn();
    },
    
    // 多选框选中数据
    handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!=1
        this.multiple = !selection.length;
        this.checkedInfo = selection[0];
    },
  }
};
</script>
<style scoped>
    .infoDialog .el-form-item{
        margin-bottom: 0px;
    }
    .el-row{
        border: 1px solid #e4e0e0;
        margin-bottom: 10px;
    }
    .infoTitle{
        line-height: 38px;
        background: #eef3fe;
        padding-left: 22px;
        position: relative;
        font-size: 18px;
        color: #35445c;
    }
    .infoTitle::before {
        content: '';
        display: block;
        position: absolute;
        left: 0px;
        top: -1px;
        height: 101%;
        width: 4px;
        background: #4677e8;
    }
</style>
<style>
    .infoDialog .el-dialog__header{
        border-bottom: 1px solid #e4e0e0;
    }
    .infoDialog .el-dialog__body{
        padding: 10px 20px;
        height: 700px;
        overflow-y: auto;
    }
    .el-dialog__body::-webkit-scrollbar {/*滚动条整体样式*/
        width: 6px;     /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;
    }

    .el-dialog__body::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
        border-radius: 10px;
        background: #4677e8;
    }
    .el-dialog__body::-webkit-scrollbar-track {/*滚动条里面轨道*/
        border-radius: 10px;
        background: #ccc;
    }
</style>